<template>
  <!--练习统计-->
  <view class="practiceStatistics">
    <UserHead :headInfo="headInfo"></UserHead>
    <view class="statistics">
      <view class="modal flex flex-column">
        <text class="title">题型情况</text>
        <view :style="{ width: (windowWidth - 40) + 'px', height: (windowWidth - 40) + 'px' }">
          <l-echart ref="radarRef" />
        </view>
      </view>
      <view class="modal flex flex-column">
        <text class="title" style="padding: 18px 0">分析统计</text>
        <view :style="{ width: (windowWidth - 40) + 'px', height: (windowWidth - 40) + 'px' }">
          <l-echart ref="columnarRef" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
import UserHead from "@/improve/publish/answerDetail/head/UserHead.vue";
import { getMarketItemSituation, getMarketItemStructAnalysis, getPracticeStudentCheckHeader } from "@/improve/services";
import { formatTime } from "@/utils/PrjUtils";

export default {
  name: "practiceStatistics",
  components: { UserHead },
  data() {
    return {
      upgPracticeUuid: "",
      checkUuid: '',
      windowWidth: 0,
      windowHeight: 0,
      headInfo: null,
      radarData: {
        typeList: [
          { max: 100, name: "判断题", "type": "0101" },
          { max: 100, name: "单选题", "type": "0201" },
          { max: 100, name: "多选题", "type": "0301" },
          { max: 100, name: "简答题", "type": "si01" },
          { max: 100, name: "填空题", "type": "si02" },
          { max: 100, name: "计算题", "type": "si03" }
        ],
        values: [],
        // values: [100, 20, 30, 40, 90, 70],
      },
      radarValueMap: {
        "0101": "0",
        "0201": "0",
        "0301": "0",
        "si01": "0",
        "si02": "0",
        "si03": "0"
      },
      columnarData: {
        "totalNum": [],
        "x": [],
        "correctNum": [],
        "correctRate": []
        // "totalNum": [120, 200, 150, 80, 70, 110, 130],
        // "x": ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // "correctNum": [10, 160, 100, 80, 60, 50, 100],
        // "correctRate": []
      }, //柱状图
    }
  },
  methods: {
    // 获取用户练习信息
    async getUserPracticeInfo() {
      const data = await getPracticeStudentCheckHeader({ checkUuid: this.checkUuid })
      this.headInfo = {...data, answerTime: data.answerTime <= 0 || !data.answerTime ? '00:00:00' : formatTime(data.answerTime)}
    },
    //雷达图
    async onGetRadar() {
      const chart = await this.$refs[`radarRef`].init(echarts);
      let colorArr = [
        '#4BA8FF', '#60B223', '#E1852A', '#3656FA', '#A34BFA', '#ECC83A'
      ];
      let richColor = []
      colorArr.forEach((item, idx) => {
        richColor[`l${idx + 1}`] = {
          width: 2,
          height: 12,
          backgroundColor: item
        }
      })
      let option = {
        grid: {
          left: 10,
          right: 20,
          bottom: 15,
          top: 40,
          containLabel: true
        },
        radar: {
          radius: '50%',
          center: ['50%', '50%'],
          axisName: {
            show: true,
            formatter: (name, params, index) => {
              console.log(name, 'name');
              console.log(params, 'params');
              console.log(index, 'index');
              if (name) {
                return [`{l${params.index}|}  {a|${params.name}}`, `{b|准确率} {x|${this.radarValueMap[params.type]}%}`].join('\n\n')
              }
            },
            rich: {
              ...richColor,
              a: {
                color: '#333',
                fontSize: 12,
                fontWeight: 500,
                margin: 10
              },
              b: {
                fontSize: 10,
                color: '#999999'
              },
              x: {
                fontSize: 10,
                fontWeight: 500,
                color: '#2B5182'
              }
            }
          },
          indicator: this.radarData.typeList
        },
        series: [
          {
            name: '',
            type: 'radar',
            data: [
              {
                value: this.radarData.values,
                name: 'Allocated Budget'
              }
            ],
            itemStyle: {
              normal: {
                color: '#37B874',  // 设置背景颜色及透明度
              }
            },
            areaStyle: {
              normal: {
                opacity: 0.5  // 设置雷达图区域的透明度为0，使其透明
              }
            }
          }
        ]
      }
      chart.setOption(option)
    },
    //柱状图
    async onGetColumnar() {
      const chart = await this.$refs.columnarRef.init(echarts);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['考核总分', '考核平均分']
        },
        xAxis: [
          {
            type: 'category',
            data: this.columnarData.x || [],

            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
          },
        ],
        series: [
          {
            name: '考核总分',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value;
                // return value + '道';
              }
            },
            data: this.columnarData.totalNum || []
          },
          {
            name: '考核平均分',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value;
                // return value + '道';
              }
            },
            data: this.columnarData.correctNum || []
          },
        ]
      }
      chart.setOption(option)
    },
    async getMarketItemSituation() {
      const data = await getMarketItemSituation({ checkUuid: this.checkUuid })
      this.radarData = {...data}
      this.radarData.typeList.forEach((i,index) => {
        this.radarValueMap[i.type] = this.radarData.values[index]
      })
      this.onGetRadar()
    },
    async getMarketItemStructAnalysis() {
      const data = await getMarketItemStructAnalysis({ checkUuid: this.checkUuid })
      this.columnarData = {...data}
      this.onGetColumnar()
    }
  },
  onLoad(options) {
    this.upgPracticeUuid = options.upgPracticeUuid
    this.checkUuid = options.checkUuid
    this.getUserPracticeInfo()
    this.getMarketItemSituation()
    this.getMarketItemStructAnalysis()
    uni.getSystemInfo({
      success: (res) => {
        this.windowWidth = res.windowWidth
        this.windowHeight = res.windowHeight
      }
    })
  }
}
</script>

<style scoped lang="scss">
.practiceStatistics {
  height: 100vh;

  .statistics {
    background-color: #FFFFFF;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    position: relative;
    margin-top: -25px;
    padding-bottom: calc(env(safe-area-inset-bottom));
    padding-top: 18px;

    .modal {
      padding: 0 16px;
      border-bottom: solid 3px #F5F5F5;

      &.modal:last-child {
        border-bottom: none;
      }

      .title {
        font-size: 16px;
        color: #333333;
        font-weight: bold;
      }
    }

    .line {
      width: 100%;
      background-color: #F5F5F5;
      height: 3px;
    }
  }
}
</style>